<template>
  <a-spin :spinning="loading" class="page-miH page-bgBack">
    <PageHeader @back="goBack" subTitle="返回">
      {{ routerData.channelName + " " + routerData.yearly + "年" + routerData.monthly + "月劳务费结算" }}
    </PageHeader>
    <div class="page">
      <div>
        <div class="fix-item-wrapper">
          <div class="fix-item-one">
            <p class="fix-item-name">合计</p>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">产生费用人数</p>
              <p class="childContentName">
                {{ routerData.feePeopleNumber !== null ? routerData.feePeopleNumber : "--" }}
              </p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">工时抽成</p>
              <p class="childContentName">¥{{ routerData.sumWorkTimeRake !== null ? routerData.sumWorkTimeRake : "--" }}</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">一次性费用</p>
              <p class="childContentName">¥{{ routerData.sumOneTimeFee !== null ? routerData.sumOneTimeFee : "--" }}</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">特殊费用</p>
              <p class="childContentName">¥{{ routerData.sumSpecialFee !== null ? routerData.sumSpecialFee : "--" }}</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">应付总费用</p>
              <p class="childContentName">¥{{ routerData.sumTotalFee !== null ? routerData.sumTotalFee : "--" }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="operation">
        <div>
          <a-input-search allow-clear class="mr12" placeholder="姓名/身份证号" style="width: 180px" @search="inputChange" />
          <a-input-search allow-clear class="mr12" placeholder="搜索用工单位" style="width: 180px;" @search="inputChange2" />
        </div>
        <div>
          <a-button style="margin-right:15px" :disabled="!selectedRowKeys.length" @click="() => download(1)">批量导出</a-button>
          <a-button @click="() => download(2)">全部导出</a-button>
        </div>
      </div>
      <div class="tableBox">
        <a-table
          row-key="id"
          :columns="columns"
          :data-source="dataList"
          :pagination="pagination"
          @change="handleTableChange"
          :scroll="{ x: 1200 }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
        >
        </a-table>
      </div>
    </div>
  </a-spin>
</template>
<script>
const columns = [
  {
    title: "员工名称",
    dataIndex: "empName",
    key: "empName",
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 200
  },
  {
    title: "工时",
    dataIndex: "workTime",
    key: "workTime",
    width: 120
  },
  {
    title: "工时抽成",
    dataIndex: "workTimeRake",
    key: "workTimeRake",
    width: 120
  },
  {
    title: "一次性费用",
    dataIndex: "oneTimeFee",
    key: "oneTimeFee",
    width: 120
  },
  {
    title: "特殊费用",
    dataIndex: "specialFee",
    key: "specialFee",
    width: 120
  },
  {
    title: "劳务费结算规则",
    dataIndex: "serviceFeeRule",
    key: "serviceFeeRule",
    width: 150
  },
  {
    title: "用工单位",
    dataIndex: "companyName",
    key: "companyName",
    width: 120
  },
  {
    title: "应付总费用",
    dataIndex: "totalFee",
    key: "totalFee",
    scopedSlots: { customRender: "totalFee" },
    width: 120
  }
];
import { getFeeSumDetail } from "@/api/outsourcing/outsourcing";
import { isContainByString } from "@/utils/index";

import axios from "axios";
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      nameOrIdCard: null,
      routerData: this.$route.query.detail ? JSON.parse(this.$route.query.detail) : {},
      defaultTime: this.$route.query.defaultTime,
      dataList: [
        {
          name: "4444"
        }
      ],
      columns,
      size: "default",
      companyName: null,
      loading: false,
      selectedRowKeys: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null
      },
      isContainByString
    };
  },
  created() {
    this.getFeeSumDetailList();
  },

  methods: {
    download(i) {
      const token = this.$store.state.auth.token;
      let params = {};
      if (i === 2) {
        params = {
          channelFeeId: this.routerData.id
        };
      } else {
        params = {
          ids: this.selectedRowKeys,
          channelFeeId: this.routerData.id
        };
      }
      axios({
        url: `/salary/api/v1/channelFeeSettlementDetails/export`,
        params: params,
        paramsSerializer: param => {
          return qs.stringify(param, { indices: false });
        },
        method: "get",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then(res => {
          if (res.data && res.data.type === "application/json") {
            const reader = new FileReader();
            reader.readAsText(res.data, "utf-8");
            reader.onload = () => {
              const resJson = JSON.parse(reader.result);
              this.$message.error(resJson.msg);
            };
          } else {
            const blob = new Blob([res.data], {
              type: "application/octet-stream"
            });
            const link = document.createElement("a");
            try {
              link.download = `${this.routerData.channelName}_` + "渠道劳务费详情" + ".xlsx";
            } catch (err) {
              console.log("debug log --> ", res);
            }
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    // 表格数据查询
    getFeeSumDetailList() {
      getFeeSumDetail({
        companyName: this.companyName ? this.companyName : null,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        nameOrIdCard: this.nameOrIdCard ? this.nameOrIdCard : null,
        channelFeeId: this.routerData.id
      }).then(res => {
        this.dataList = res.data.entities ? res.data.entities : [];
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    inputChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.nameOrIdCard = e;
      this.getFeeSumDetailList();
    },
    inputChange2(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.companyName = e;
      this.getFeeSumDetailList();
    },
    goBack() {
      this.$router.push({
        path: this.isContainByString("settlementAdmin") ? "/settlementAdmin/labor" : "/settlement/labor",
        query: { index: this.defaultTime }
      });
    },
    monthChange() {},
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getFeeSumDetailList();
      // this.getEmpSelectPage();
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys;
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  padding: 25px;
  .headerBox {
    display: flex;
    justify-content: space-between;
  }
  .fix-item-wrapper {
    display: flex;
    height: 120px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 25px;
    padding: 33px;
    border: 1px solid #e8e8e8;
    display: flex;
    .childpProjectName {
      width: 100px;
      font-size: 14px;
      font-weight: 300;
      color: #9c9c9c;
    }
    .childContentName {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    .fix-item-one {
      height: 40px;
      display: flex;
      align-self: center;
      padding-left: 40px;
      width: 50%;
      border-right: 1px solid #e8e8e8;
    }
    .fix-item-two {
      padding-left: 75px;
      margin-top: 10px;
      width: 50%;
      height: 45px;
      padding-right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .fix-item-name {
      font-size: 18px;
      font-weight: 500;
      color: #222426;
      line-height: 28px;
      width: 80px;
    }
  }
  .operation {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
